<template>
    <view
        class="header"
        :style="{'background': `${background}`}"
    >
        <view :style="{
            'height': `${statusBarHeight}px`
        }"></view>
        <!-- 自定义导航栏高度 并 居中 -->
        <view
            class="nav-black"
            :style="{
            height: `${barHeight}px`,
            'line-height': `${barHeight}px`,
            'text-align': 'center'
        }">
            <view class="return_block" @click="onReturn">
                <img class="return_icon" v-if="returnIcon == 'black'" style="width: 21rpx; height: 36rpx" src="https://xunlantech.oss-cn-hangzhou.aliyuncs.com/source/static/image/return_icon.png" />
                <img class="return_icon" v-if="returnIcon == 'white'" src="https://xunlantech.oss-cn-hangzhou.aliyuncs.com/source/static/image/return_white_icon.png" style="width: 48rpx; height: 48rpx" />
            </view>
            <img v-if="special" style="width: 140rpx; height: 44rpx" src="../static/logo.png" />
            <text class="title" :style="{ 'color': `${fontColor}`, fontSize: '36rpx', fontWeight: 400 }">{{ title }}</text>
        </view>
    </view>
</template>
<script>
var app = getApp()
export default ({
    name: "Header",
    props: {
        title: {
            type: String,
            default: ''
        },
        background: {
            type: String,
            default: '#FFFFFF'
        },
        returnIcon: {
            type: String,
            default: ''
        },
        fontColor: {
            type: String,
            default: '#ffffff'
        },
        special: {
            type: Boolean,
            default: false
        }
    },
    data() {
        return {
            statusBarHeight: app.globalData.statusBarHeight,
            barHeight: app.globalData.barHeight
        }
    },
    created() {

    },
    methods: {
        onReturn() {
            uni.navigateBack(1)
        }
    }

})
</script>
<style scoped lang="scss">
.header {
    width: 100%;
    height: 100%;
    z-index: 999;
    position: relative;
    //display: flex;
    //align-items: flex-end;
    //justify-content: space-between;
    .nav-black {
        display: flex;
        align-items: center;
        .return_block {
            width: 60rpx;
            height: 100%;
            display: flex;
            z-index: 1;
            margin-left: 20rpx;
            .return_icon {
                margin: auto;
            }
        }
        .title {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 100%;
            position: absolute;
            z-index: 0;
        }
    }
    .nav-black > img {
        position: absolute;
        left: 25rpx;
    }
    .return_white {
        width: 36rpx;
        height: 36rpx;
    }
    .return_black {
        width: 21rpx;
        height: 36rpx;
    }
}
</style>
